<template>
<div style="background: #ececec; padding: 30px">
  <div>
    <a-card title="接口信息" :bordered="false" style="width: 100%;" >
      <a-list :data-source="InterfaceData">
        <template #renderItem="{ item }">
          <a-descriptions bordered>
            <a-descriptions-item label="名称">{{item.ifname}}</a-descriptions-item>
            <a-descriptions-item label="请求头"> {{item.requestHeader}}</a-descriptions-item>
            <a-descriptions-item label="响应头"> {{item.responseHeader}}</a-descriptions-item>
            <a-descriptions-item label="创建时间" :span="2">{{item.createTime}}</a-descriptions-item>
            <a-descriptions-item label="更新时间" :span="2">{{item.updateTime}}</a-descriptions-item>
            <a-descriptions-item label="请求方法">{{item.method}}</a-descriptions-item>
            <a-descriptions-item label="url">{{item.url}}</a-descriptions-item>
            <a-descriptions-item label="状态"> {{item.status}}</a-descriptions-item>
            <a-descriptions-item label="用户信息"> {{item.userId}}</a-descriptions-item>
            <a-descriptions-item label="描述">
              {{item.description}}
            </a-descriptions-item>
          </a-descriptions>
        </template>
      </a-list>
    </a-card>

    <a-space direction="vertical" style="margin-top: 20px;width: 100%;" >
      <a-card >
        <a-comment >
          <template #content>
            <a-form-item>
              <a-textarea v-model:value="params" :rows="4" />
            </a-form-item>
          </template>
        </a-comment>
        <a-button type="primary" @click="call">在线调用</a-button>
      </a-card>

    </a-space>
    <a-space direction="vertical" style="margin-top: 20px;width: 100%;" >
      <a-card title="返回结果">
        <a-comment>
          <template #content>
            <p>
              {{result}}
            </p>
          </template>
        </a-comment>
        
      </a-card>
    </a-space>

  
  </div>
</div>

  
</template>
<script lang="ts" setup>
import { ref ,onMounted} from 'vue';
import axios from '../config/axios'
import {useRouter,useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

const searchText = ref();
const id = route.query.id
const params = ref()

const result = ref()



const InterfaceData = ref([]);
onMounted(()=>{
  getInterface()
})
const getInterface = async()=>{
  const res = await axios.get('/interfaceInfo/get',{
    params:{
      id:id
    }
  })
  InterfaceData.value[0] = res.data.data
}


const onSearch = (searchText) => {
  console.log('use value', searchText);
};

const call = async()=>{
  const res = await axios.post("/interfaceInfo/invoke",{
    id:id,
    requestParams:params.value
  })
  result.value = res.data.data
  console.log(res.data);
}
</script>

<style>
  .searchPosition{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
  }
</style>

